﻿@page "/autofills"
@inject IStringLocalizer<AutoFills> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["P1"]</h4>

<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="Normal">
    <div class="mb-3">@Localizer["P4"] <code>Name</code> @Localizer["P5"] <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class="fa-solid fa-arrow-up"></i></kbd> <kbd><i class="fa-solid fa-arrow-down"></i></kbd></div>
    <AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
        <Template>
            <div class="d-flex">
                <div>
                    <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </Template>
    </AutoFill>
    <img src="@Foo.GetAvatarUrl(Model.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
</DemoBlock>

<DemoBlock Title="@Localizer["P6"]" Introduction="@Localizer["P7"]" Name="CustomFilter">
    <div class="mb-3">@Localizer["P8"] <code>Name</code> @Localizer["P9"] <code>OnCustomFilter</code> @Localizer["P10"] <code>Name</code> @Localizer["P11"] <b>@Localizer["P12"]</b> <code>Count</code> @Localizer["P13"] 50</div>
    <AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
        <Template>
            <div class="d-flex">
                <div>
                    <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </Template>
    </AutoFill>
    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
</DemoBlock>

<DemoBlock Title="@Localizer["P14"]" Introduction="@Localizer["P15"]" Name="ShowDropdownListOnFocus">
    <div class="mb-3">@Localizer["P16"] <code>ShowDropdownListOnFocus</code> @Localizer["P17"] <code>true</code> @Localizer["P18"] <code>false</code> @Localizer["P19"]</div>
    <AutoFill TValue="Foo" Value="Model" Items="Items" ShowDropdownListOnFocus="false" OnGetDisplayText="OnGetDisplayText" class="mb-3">
        <Template>
            <div class="d-flex">
                <div>
                    <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </Template>
    </AutoFill>
    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
